<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <h1 id="head1">SignalR Hubs Sample</h1>
    <div>
        <select id="protocol">
            <option value="json" selected>json</option>
            <option value="msgpack">msgpack</option>
        </select>

        <select id="transport">
            <option value="Automatic" selected>Automatic</option>
            <option value="WebSockets">WebSockets</option>
            <option value="ServerSentEvents">ServerSentEvents</option>
            <option value="LongPolling">LongPolling</option>
        </select>

        <select id="hubType">
            <option value="default" selected>Hub</option>
            <option value="dynamic">DynamicHub</option>
            <option value="hubT">Hub&lt;T&gt;</option>
        </select>

        <input type="text" id="displayname" placeholder="Enter User Name" />
        <input type="button" id="connect" value="Connect" />
        <input type="button" id="disconnect" value="Disconnect" />

        <input type="checkbox" id="autoReconnect" checked />
        Enable automatic reconnects
    </div>


    <h4>To Everybody</h4>
    <form class="form-inline">
        <div class="input-append">
            <input type="text" id="message-text" placeholder="Type a message, name or group" />
            <input type="button" id="broadcast" class="btn" value="Broadcast" />
            <input type="button" id="broadcast-exceptme" class="btn" value="Broadcast (Others)" />
        </div>
    </form>

    <h4>To Connection</h4>
    <form class="form-inline">
        <div class="input-prepend input-append">
            <input type="text" name="connection-message" id="connection-message-text" placeholder="Type a message" />
            <input type="text" name="connection-id" id="connection-id" placeholder="Type a connection id" />
            <input type="button" id="connection-send" class="btn" value="Send to Connection" />
        </div>
    </form>

    <h4>To Me</h4>
    <form class="form-inline">
        <div class="input-append">
            <input type="text" id="me-message-text" placeholder="Type a message" />
            <input type="button" id="send" class="btn" value="Send to Me" />
            <input type="hidden" id="displayname" />
        </div>
    </form>

    <h4>Group Actions</h4>
    <form class="form-inline">
        <div class="input-prepend input-append">
            <input type="text" name="group-message" id="group-message-text" placeholder="Type a message" />
            <input type="text" name="group-name" id="group-name" placeholder="Type a group name" />
            <input type="button" id="groupmsg" class="btn" value="Send to Group" />
            <input type="button" id="others-groupmsg" class="btn" value="Send to Others in Group" />
            <input type="button" id="join-group" class="btn" value="Join Group" />
            <input type="button" id="leave-group" class="btn" value="Leave Group" />

        </div>
    </form>

    <ul id="message-list"></ul>
</body>

</html>
<script src="lib/signalr/signalr.js"></script>
<script src="lib/msgpack5/msgpack5.js"></script>
<script src="lib/signalr/signalr-protocol-msgpack.js"></script>
<script src="utils.js"></script>
<script>
    var isConnected = false;
    function invoke(connection, method) {
        if (!isConnected) {
            return;
        }
        var argsArray = Array.prototype.slice.call(arguments);
        connection.invoke.apply(connection, argsArray.slice(1))
            .then(function (result) {
                console.log("invocation completed successfully: " + (result === null ? '(null)' : result));

                if (result) {
                    addLine('message-list', result);
                }
            })
            .catch(function (err) {
                addLine('message-list', err, 'red');
            });
    }

    function getText(id) {
        return document.getElementById(id).value;
    }

    let connectButton = document.getElementById('connect');
    let disconnectButton = document.getElementById('disconnect');
    let autoReconnectCheckbox = document.getElementById('autoReconnect');
    let broadcastButton = document.getElementById('broadcast');
    let broadcastExceptMeButton = document.getElementById('broadcast-exceptme');
    let sendToConnectionButton = document.getElementById('connection-send');
    let joinGroupButton = document.getElementById('join-group');
    let leaveGroupButton = document.getElementById('leave-group');
    let groupMsgButton = document.getElementById('groupmsg');
    let othersGroupMsgButton = document.getElementById('others-groupmsg');
    let sendButton = document.getElementById('send');
    let protocolDropdown = document.getElementById('protocol');
    let transportDropdown = document.getElementById('transport');
    let hubTypeDropdown = document.getElementById('hubType');

    function updateButtonState(isConnected) {
        broadcastButton.disabled = !isConnected;
        broadcastExceptMeButton.disabled = !isConnected;
        sendToConnectionButton.disabled = !isConnected;
        joinGroupButton.disabled = !isConnected;
        leaveGroupButton.disabled = !isConnected;
        groupMsgButton.disabled = !isConnected;
        othersGroupMsgButton.disabled = !isConnected;
        sendButton.disabled = !isConnected;
        disconnectButton.disabled = !isConnected;
        connectButton.disabled = isConnected;
    }

    updateButtonState(false);
    var connection;

    click('connect', function (event) {

        name = document.getElementById("displayname").value
        if (name === "") {
            alert("Please enter a valid name");
            return;
        }

        let hubRoute = hubTypeDropdown.value || "default";
        let protocol = protocolDropdown.value === "msgpack" ?
            new signalR.protocols.msgpack.MessagePackHubProtocol() :
            new signalR.JsonHubProtocol();

        var options = {};
        if (transportDropdown.value !== "Automatic") {
            options.transport = signalR.HttpTransportType[transportDropdown.value];
        }

        hubRoute = hubRoute + "?name=" + name;
        console.log('http://' + document.location.host + '/' + hubRoute);

        var connectionBuilder = new signalR.HubConnectionBuilder()
            .configureLogging("trace")
            .withUrl(hubRoute, options)
            .withHubProtocol(protocol);

        if (autoReconnectCheckbox.checked) {
            connectionBuilder.withAutomaticReconnect();
        }

        connection = connectionBuilder.build();

        connection.on('Send', function (msg) {
            addLine('message-list', msg);
        });

        connection.onclose(function (e) {
            if (e) {
                addLine('message-list', 'Connection closed with error: ' + e, 'red');
            }
            else {
                addLine('message-list', 'Disconnected', 'green');
            }
            updateButtonState(false);
        });

        connection.onreconnecting(function (e) {
            addLine('message-list', 'Connection reconnecting: ' + e, 'orange');
        });

        connection.onreconnected(function (e) {
            addLine('message-list', 'Connection reconnected!', 'green');
        });

        connection.start()
            .then(function () {
                isConnected = true;
                updateButtonState(true);
                addLine('message-list', 'Connected successfully', 'green');
            })
            .catch(function (err) {
                updateButtonState(false);
                addLine('message-list', err, 'red');
            });
    });

    click('disconnect', function (event) {
        connection.stop()
            .then(function () {
                isConnected = false;
                updateButtonState(false);
            });
    });

    click('broadcast', function (event) {
        let data = getText('message-text');
        invoke(connection, 'Send', name, data);
    });

    click('join-group', function (event) {
        let groupName = getText('group-name');
        invoke(connection, 'JoinGroup', groupName, name);
    });

    click('leave-group', function (event) {
        let groupName = getText('group-name');
        invoke(connection, 'LeaveGroup', groupName, name);
    });

    click('groupmsg', function (event) {
        let groupName = getText('group-name');
        let message = getText('group-message-text');
        invoke(connection, 'SendToGroup', groupName, name, message);
    });

    click('others-groupmsg', function (event) {
        let groupName = getText('group-name');
        let message = getText('group-message-text');
        invoke(connection, 'SendToOthersInGroup', groupName, name, message);
    });

    click('send', function (event) {
        let data = getText('me-message-text');
        invoke(connection, 'Echo', name, data);
    });

    click('broadcast-exceptme', function (event) {
        let data = getText('message-text');
        invoke(connection, 'SendToOthers', name, data);
    });

    click('connection-send', function (event) {
        let data = getText('connection-message-text');
        let id = getText('connection-id');
        invoke(connection, 'SendToConnection', id, name, data);
    });

</script>
